<script>
import { uuid } from 'vue-uuid'
export default {
  name: 'LoginView',
  data () {
    return {
      basePath: process.env.VUE_APP_BASE_PATH,
      formData: {
        username: '',
        password: '',
        code: '',
        uuid: ''
      },
      codePath: '',
      rules: {
        username: [
          { required: true, message: '用户名不能为空' }
        ],
        password: [
          { required: true, message: '密码不能为空' }
        ],
        code: [
          { required: true, message: '验证码不能为空' },
          {
            validator: (rule, value, callback) => {
              if (value.length === 5) {
                callback()
              } else {
                callback(new Error('验证码正度必须为5'))
              }
            }
          }
        ]
      }
    }
  },
  methods: {
    getKaptcha () {
      this.formData.uuid = uuid.v4()
      this.codePath = `${this.basePath}kaptcha.jpg?uuid=${this.formData.uuid}`
    },
    login () {
      // console.log(this)
      // console.log(this.$refs)
      // console.log(this.$refs.h3)/* 原生组件通过ref获取到的是它的DOM对象 */
      // console.log(this.$refs.formData)/* Vue组件通过ref获取到的是它的Vue组件对象 */
      /* 主动触发表单的验证 */
      this.$refs.formData.validate(valid => {
        if (valid) {
          this.$axios.post('login', this.formData).then(data => {
            this.$message.success('登录成功！')
            this.$cookies.set('token', data.token, '7d')
            this.$router.replace('/home')
          }).catch(() => {
            this.formData.code = ''
            this.getKaptcha()
          })
        }
      })
    }
  },
  created () {
    this.getKaptcha()
  }
}
</script>

<template>
<div class="content">
  <div class="form-group">
    <h3 ref="h3">机蜂后台管理登录</h3>
    <el-form
      @keydown.enter.native="login"
      :model="formData"
      :rules="rules"
      label-width="80px"
      ref="formData">
    <!--  prop中的值，对应的是rules中的属性    -->
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username" clearable placeholder="请输入用户名"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="formData.password" type="password" show-password clearable placeholder="请输入密码"/>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-input v-model="formData.code" maxlength="5" clearable placeholder="请输入验证码">
          <div class="kaptcha-group" slot="append">
            <img :src="codePath" @click="getKaptcha" title="点击更换验证码" alt="">
          </div>
<!--          <template slot="prepend">123</template>-->
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</div>
</template>
<style lang="scss">
.el-input-group__append{
  padding: 0;
}
</style>
<style scoped lang="scss">
  .content{
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("@/assets/login-bg.jpg") no-repeat center/cover;
    .form-group{
      width: 500px;
      background-color: rgba(255,255,255,.4);
      padding: 15px;
      border-radius: 15px;
      /*&符号存在于.form-group样式的大括号内，它就表示这个样式*/
      &>h3{
        text-align: center;
      }
      /*给form-group增加hover伪类样式*/
      //&:hover{
      //  background-color: blueviolet;
      //}

      .kaptcha-group{
        height: 40px;
        width: 160px;
        img{
          display: block;
          height: 100%;
          width: 100%;
        }
      }
    }
    /*等价于在from-group的大括号内写：&>h3*/
    //.form-group>h3{
    //  text-align: center;
    //}
  }

</style>
